<template>
	<view class="page room bgf7 c00">
		<view class="flex flexC flexB py14 bgff">
			<picker class="flex1 aliC" mode="selector" :range="statusList" @change="changeStatus">
				<view>
					<text>{{statusList[statusIndex]}}</text>
					<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</picker>
			<picker class="flex1 aliC" mode="selector" :range="bindList" @change="changeBind">
				<view>
					<text>{{bindList[bindIndex]}}</text>
					<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</picker>
			<view class="flex1 aliC" @click="showShop">
				<view>
					<text>{{selectShop.name}}</text>
					<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list">
			<view v-for="(item,index) in roomList" :key="index" class="bgff m15 r7 pt24 pb20 px12 shadow">
				<view class="flex flexC">
					<image class="w82 r6" :src="item.logo" mode="aspectFill"></image>
					<view class="flex1 ml12">
						<view class="flex flexC  mb16">
							<text class="flex1 bold6">{{item.name}}</text>
							<text class="flex1 aliR cff0" v-if="item.status == 'busy'">状态：使用中</text>
							<text class="flex1 aliR cff0" v-else-if="item.status == 'free'">状态：空闲中</text>

						</view>
						<view class="">包厢ID：{{item.id}}</view>

						<view class="">价格：{{item.hour_price}}元/小时</view>
						<view class="">最低起订：{{item.min_book_hour}}小时</view>

					</view>
				</view>
				<view class="flex flexC flexJC mt18 aliC">
					<text @click="goUnbind(item)" class="bged r40 w72 py4 mx6" v-if="item.is_bind == 1">解绑</text>
					<text @click="goBind(item)" class="bged r40 w72 py4 mx6" v-else>绑定</text>

					<text v-if="role != '店长'" class="bged r40 w72 py4 mx6" @click.stop="editSet(item)">套餐</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="edit(item)">编辑</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="open(item)">开门</text>
					<text class="bged r40 w72  mx6" @click.stop="yuPop(item)">预定</text>

				</view>
			</view>
		</scroll-view>
		<view class="add r50 bged aliC" @click="clickAdd">添加</view>


		<uni-popup ref="doorPop" type="bottom">
			<view class="popup-content2">

				<button class="popup-btn button" @click="showOpen()">开包厢</button>
				<button class="popup-btn button" @click="openRoomCmd(0)">关闭包厢</button>

				<view class="popup-btn" @click="$refs.doorPop.close()">取消</view>
			</view>

		</uni-popup>



		<uni-popup ref="timePop" type="bottom">
			<view class="popup-content2" v-if="role=='店长'">
			
			<!-- 	<button class="popup-btn button" @click="openRoomCmd(600)">临时包厢(10分钟)</button>
				<button class="popup-btn button" @click="openRoomCmd(1800)">临时包厢(30分钟)</button>			
				 -->
				<button v-for="item in hourSetList" class="popup-btn button"
					@click="openRoomCmd(item.sec)">开包厢({{item.hour}})</button>
				<view class="popup-btn" @click="$refs.timePop.close()">取消</view>
			</view>
			
			<view class="popup-content2" v-else>

				<button v-for="item in hourSetList" class="popup-btn button"
					@click="openRoomCmd(item.sec)">开包厢({{item.hour}})</button>

				<view class="popup-btn" @click="$refs.timePop.close()">取消</view>
			</view>

		</uni-popup>

		<uni-popup ref="pop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateBind">解绑</button>

				<view class="popup-btn" @click="$refs.pop.close()">取消</view>
			</view>

		</uni-popup>
		
		<uni-popup ref="setPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="clickNormalSet">普通套餐</button>
				<button class="popup-btn button" @click="clickSaleSet">营销套餐</button>
		
				<view class="popup-btn" @click="$refs.setPop.close()">取消</view>
			</view>
		
		</uni-popup>
		
		<uni-popup ref="yuPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="daiBook">代客户预定</button>
				<button class="popup-btn button" @click="bookList">预定详情</button>
		
				<view class="popup-btn" @click="$refs.yuPop.close()">取消</view>
			</view>
		
		</uni-popup>



		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>

		<!-- 预定详情弹框 -->
		<uni-popup type="bottom" ref="detailPopup">
			<room-detail :time="roomTime" :one="roomOne" @submit="doSubmit" @switchTab="switchTab" :item="room"
				@close="closePopDetail" @selectTimeTab="selectTimeTab"></room-detail>
		</uni-popup>
	</view>
</template>

<script>
	const plugin = requirePlugin("myPlugin");

	export default {
		data() {
			return {
				currentIndex: 0,
				list: ['全部', '包厢状态', '绑定状态', '雀和友店'],
				statusList: ["使用状态", '空闲', '使用中', '打扫中', '维护中'],
				bindList: ["绑定状态", '已绑定', '未绑定'],
				roomOne: null,
				roomTime: null,
				selectShop: null,
				room: null,
				roomList: [],
				statusIndex: 0,
				bindIndex: 0,
				shopList: [],
				currentRoom: null,
				selectDate: '',
				tabType: 0,
				hourSetList: [],
				setItem: null,
				role:''

			};
		},

		onLoad(option) {
			this.role = uni.getStorageSync("role");
			var select = option.selectShop;
			if (select != "") {
				this.selectShop = JSON.parse(select);
			}
			this.getShopList();
			this.getTime();
			this.getMaxHour();
		},
		onShow() {

			this.getList();
		},

		methods: {
			getMaxHour(data) {


				let param = {
					shop_id: this.selectShop.id,
				}
				let that = this;
				this.$api.getMaxHour(param).then(res => {
					if (res.code == 1) {
						that.hourSetList = res.data;
					} else {

					}

				})


			},

			openLock(res) {


				uni.showLoading({
					title: "正在开启智能锁",
				})
				const start = Date.now();
				// 调用开锁接口


				var deviceId = res.lockMac;
				var lockData = res.lockData;
				plugin.controlLock(plugin.ControlAction.OPEN, lockData, res => {
					if (res.errorCode === 10003) {
						console.log("获取版本信息时设备连接已断开", res)
					}
				}, null, deviceId).then(res => {
					uni.hideLoading({});
					console.log(res)
					if (res.errorCode == 10012) {
						uni.showModal({
							title: "提示",
							content: "蓝牙未开启,请开启蓝牙",
							showCancel: false,

						})
					}
					if (!!res.deviceId) deviceId = res.deviceId;
					if (res.errorCode === 0) {
						console.info(`已开锁--操作时间:${Date.now() - start}ms.`)
					} else {

						console.info(`开锁失败: ${res.errorMsg}`)
					}
				})
			},

			getBtLockData(data) {


				let param = {
					shop_id: data.shop_id,
					room_id: data.room_id,
				}
				let that = this;
				this.$api.btLockInfo(param).then(res => {
					if (res.code == 1) {
						console.info(res.data);
						that.openLock(res.data);
					} else {

					}

				})


			},

			showOpen() {
				this.$refs.doorPop.close();
				this.$refs.timePop.open();
			},

			selectTimeTab(item) {

				this.selectDate = item;
				if (this.tabType == 0) {
					this.getOne();
				}
				console.info("===selectTimeTab==" + this.selectDate);
			},
			
			yuPop(item){
				this.room = item;
				this.$refs.yuPop.open();
			},
			
			daiBook(){
				
				
				uni.navigateTo({
					url:'/other/order/book?id='+this.room.id
				})
				this.$refs.yuPop.close();
				
			},

			bookList(item) {
				
				this.$refs.yuPop.close();
				
				this.getOne();
				this.$refs.detailPopup.open();
			},

			closePopDetail() {
				this.$refs.detailPopup.close();
			},

			getTime() {
				let param = {};
				let that = this;
				this.$api.roomTime(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomTime = res.data;
						that.selectDate = res.data[0]['dateValue']
					} else {

					}
				})
			},

			switchTab(tabIndex) {

				this.tabType = tabIndex;
				if (tabIndex == 0) {
					this.getOne();
				} else if (tabIndex == 1) {
					this.getTwo();
				} else {
					this.getThree();
				}
				console.info("===switchTab====" + tabIndex);
			},
			
			getOne() {
				let param = {
					id: this.room.id,
					date: this.selectDate
				};
				let that = this;
				this.$api.roomTimeOne(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomOne = res.data;
					} else {

					}
				})
			},

			openRoomCmd(time) {
				this.$refs.doorPop.close();

				let param = {
					shop_id: this.selectShop.id,
					room_id: this.currentRoom.id,
					sec: time
				};
				let that = this;
				this.$api.openNewRoom(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						if (res.data.is_bt == 1) {
							that.getBtLockData(res.data);
						}
					} else {

					}
				})
			},
			
			open(item) {
				this.currentRoom = item;
				this.$refs.doorPop.open();

			},

			updateBind() {

				this.$refs.pop.close();
				let param = {
					room_id: this.currentRoom.id
				};
				let that = this;
				this.$api.unbindDevice(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "解绑提示",
							content: "解绑成功",
							showCancel: false,
							complete() {
								that.getList();
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			goUnbind(item) {

				this.currentRoom = item;
				this.$refs.pop.open();
			},

			goBind(item) {
				uni.navigateTo({
					url: '/other/device/bindDevice?selectShop=' + JSON.stringify(this.selectShop) + "&room=" + JSON
						.stringify(item)
				})
			},

			editSet(item) {

				this.setItem = item;
				this.$refs.setPop.open();
				// this.setItem = item;
				// uni.navigateTo({
				// 	url: '../package/saleEdit?id=' + this.setItem.id
				// })

			},

			clickNormalSet() {
				this.$refs.setPop.close();
				uni.navigateTo({
					url: '../package/edit?id=' + this.setItem.id
				})
			},

			clickSaleSet() {
				this.$refs.setPop.close();
				uni.navigateTo({
					url: '../package/saleEdit?id=' + this.setItem.id
				})

			},

			edit(item) {
				uni.navigateTo({
					url: '../room/edit?id=' + item.id
				})
			},

			onClose() {
				this.$refs.shopPicker.close();
			},
			
			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {

						}
					} else {

					}
				})
			},

			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				this.getList();

			},


			changeStatus(e) {
				console.info(e.detail.value);
				this.statusIndex = e.detail.value;
				this.getList();
			},
			changeBind(e) {
				this.bindIndex = e.detail.value;
				this.getList();
			},

			clickAdd() {
				uni.navigateTo({
					url: '../room/add?selectShop=' + JSON.stringify(this.selectShop)
				})
			},
			getList() {
				let param = {
					shop_id: this.selectShop.id,
					status: this.statusIndex,
					bind: this.bindIndex
				};
				let that = this;
				this.$api.getRoomList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomList = res.data;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.room {
		.w12 {
			width: 24rpx;
		}

		.w82 {
			width: 164rpx;
			height: 164rpx;
		}

		.w72 {
			width: 144rpx;
			display: inline-block;
		}

		.list {
			height: calc(100vh - 96rpx);
		}

		.add {
			position: fixed;
			bottom: 100px;
			right: 10rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #F5C51D;
		}
	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>